<template>
  <a-card :bordered="false">
    <!-- <div class="table-operator">
      <a-button type="primary" icon="redo" @click="getDataList()">刷新</a-button>
    </div> -->

    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="10">
          <a-col :md="6" :sm="24" v-if="activeName=='second'">
            <a-form-item label="客户名称">
              <a-input v-model="cname" placeholder="请输入客户名称" />
            </a-form-item>
          </a-col>
          <a-col :md="5" :sm="24">
            <a-form-item label="日期区间">
              <a-range-picker v-model="range" />
              <!-- <a-range-picker style="margin-left: 8px;width: 220px;" :disabled="timeDisabled" v-model="time" /> -->
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-button type="primary" @click="() => {
    this.pagination.current = 1
    this.getDataList()
  }
    ">查询</a-button>
            <a-button style="margin-left: 8px" @click="() => ((activeName='first'), this.getDataList())">重置</a-button>
            <a-button type="primary" icon="download" @click="downloadTemplate" style="margin-left: 8px;">导出</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="汇总" name="first"></el-tab-pane>
      <el-tab-pane label="明细" name="second"></el-tab-pane>
    </el-tabs>

    <a-table v-if="activeName=='first'" ref="table" :columns="columns" :dataSource="data" :pagination="pagination" :loading="loading"
      @change="handleTableChange" @showSizeChange="onShowSizeChange" :bordered="true" size="small">
      <span slot="num" slot-scope="text, record">
        {{ text.toFixed(4) }}
      </span>
      <span slot="price" slot-scope="text, record">
        {{ text.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",") }}
      </span>
      <span slot="amount" slot-scope="text, record">
        {{ text.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",") }}
      </span>
      <span slot="num1" slot-scope="text, record">
        {{ text.toFixed(4) }}
      </span>
      <span slot="amount1" slot-scope="text, record">
        {{ text.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",") }}
      </span>
    </a-table>

    <a-table v-if="activeName=='second'" ref="table" :columns="columns1" :dataSource="data1" :pagination="pagination" :loading="loading"
      @change="handleTableChange" @showSizeChange="onShowSizeChange" :bordered="true" size="small">
      <span slot="num" slot-scope="text, record">
        {{ text.toFixed(4) }}
      </span>
      <span slot="price" slot-scope="text, record">
        {{ text.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",") }}
      </span>
      <span slot="amount" slot-scope="text, record">
        {{ text.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",") }}
      </span>
      <span slot="num1" slot-scope="text, record">
        {{ text.toFixed(4) }}
      </span>
      <span slot="amount1" slot-scope="text, record">
        {{ text.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",") }}
      </span>
    </a-table>

  </a-card>
</template>

<script>
import moment from 'moment';
const columns = [
  { title: '货品名称', dataIndex: 'name' },
  // { title: '单价', dataIndex: 'price', align: 'right', scopedSlots: { customRender: 'price' } },
  { title: '出库数量', dataIndex: 'num', align: 'right', scopedSlots: { customRender: 'num' } },
  { title: '开票数量', dataIndex: 'num1', align: 'right', scopedSlots: { customRender: 'num1' } },
  { title: '出库金额', dataIndex: 'amount', align: 'right', scopedSlots: { customRender: 'amount' } },
  { title: '开票金额', dataIndex: 'amount1', align: 'right', scopedSlots: { customRender: 'amount1' } },
]

const columns1 = [
  { title: '客户名称', dataIndex: 'cusname' },  
  { title: '货品名称', dataIndex: 'name' },
  { title: '出库数量', dataIndex: 'num', align: 'right', scopedSlots: { customRender: 'num' } },
  { title: '开票数量', dataIndex: 'num1', align: 'right', scopedSlots: { customRender: 'num1' } },
  { title: '出库金额', dataIndex: 'amount', align: 'right', scopedSlots: { customRender: 'amount' } },
  { title: '开票金额', dataIndex: 'amount1', align: 'right', scopedSlots: { customRender: 'amount1' } },
]

export default {
  components: {
  },
  created() {
    this.range = [this.timeFormat(new Date(new Date().getFullYear(), new Date().getMonth(), 1)), this.timeFormat(new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0))]
  },
  mounted() {
    this.getDataList()
  },
  data() {
    return {
      activeName: 'first',
      range: [],
      cname:'',
      disabled: false,
      data: [],
      data1:[],
      pagination: {
        current: 1,
        pageSize: 25,
        showTotal: (total, range) => `总数:${total} 当前:${range[0]}-${range[1]}`,
        pageSizeOptions: ['25', '50', '100'], // 设置pageSize的可选值，页面可以通过下拉框进行选择
        showSizeChanger: true
      },
      filters: {},
      sorter: { field: 'Id', order: 'desc' },
      queryParam: {},
      selectedRowKeys: [],
      loading: false,
      columns,
      columns1
    }
  },
  methods: {
    //导出
    async downloadTemplate() {
      this.showDownload = true;
        await this.$http.post('/InvoiceManagement/ST_RDRecord_b/ExportReport0', {
          BeginDate: this.timeFormat(this.range[0]),
          EndDate: this.timeFormat(this.range[1]),
          ...this.filters
        }, { responseType: 'blob' }).then(res => {
          const url = URL.createObjectURL(res)
          // console.log(url)
          const fileName = 'T+出库单发票对照表'
          const aTag = document.createElement('a')
          aTag.download = fileName
          aTag.href = url
          aTag.click()
          URL.revokeObjectURL(aTag.href)
        }).catch(err => {
          this.$message.error(err);
        })
    },
    handleClick(tab, event) {
      if (tab.name=='first') {
        this.cname=''
        this.getDataList()
      }
      else{
        this.getDataList1()
      }
    },
    timeFormat(val) {
      // 时间格式化函数
      return moment(val).format('YYYY-MM-DD')
    },
    handleTableChange(pagination, filters, sorter) {
      this.pagination = { ...pagination }
      this.filters = { ...filters }

      // this.getDataList()
    },
    onShowSizeChange(current, pageSize) {
      this.pagination.pageSize = pageSize;
    },
    moment,
    getDataList() {
      if(this.activeName=='second'){
        this.getDataList1()
        return
      }
      if (this.range.length < 2) {
        this.$message.info('请先选择日期!')
        return
      }
      this.loading = true
      this.$http
        .post('/InvoiceManagement/ST_RDRecord_b/GetReport0', {
          BeginDate: this.timeFormat(this.range[0]),
          EndDate: this.timeFormat(this.range[1]),
          ...this.filters
        })
        .then(resJson => {
          this.loading = false
          this.data = resJson.Data
          const pagination = { ...this.pagination }
          pagination.total = resJson.Total
          this.pagination = pagination
        })
    },
    getDataList1() {
      if(this.activeName=='first'){
        this.getDataList()
        return
      }
      if (this.range.length < 2) {
        this.$message.info('请先选择日期!')
        return
      }
      this.loading = true
      this.$http
        .post('/InvoiceManagement/ST_RDRecord_b/GetReport01', {
          BeginDate: this.timeFormat(this.range[0]),
          EndDate: this.timeFormat(this.range[1]),
          CusName: this.cname,
          ...this.filters
        })
        .then(resJson => {
          this.loading = false
          this.data1 = resJson.Data
          const pagination = { ...this.pagination }
          pagination.total = resJson.Total
          this.pagination = pagination
        })
    },
  },
}
</script>
